<template>
  <view class="user-vehicle-stats-container">
    <z-paging 
      ref="paging" 
      v-model="dataList" 
      @query="queryList"
      :auto="false"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      :empty-view-text="'暂无数据'"
      class="list-paging"
    >
      <template #top>
        <!-- 页面标题 -->
        <view class="page-header">
          <view class="header-title">用户与车辆统计</view>
        </view>
        
        <!-- 筛选区域 -->
        <view class="filter-section">
          <view class="filter-row">
            <view class="filter-item">
              <text class="filter-label">开始日期：</text>
              <picker mode="date" :value="filters.startDate" @change="onStartDateChange">
                <view class="date-picker">
                  <text>{{ filters.startDate || '请选择' }}</text>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </view>
              </picker>
            </view>
            
            <view class="filter-item">
              <text class="filter-label">结束日期：</text>
              <picker mode="date" :value="filters.endDate" @change="onEndDateChange">
                <view class="date-picker">
                  <text>{{ filters.endDate || '请选择' }}</text>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </view>
              </picker>
            </view>
          </view>
          
          <view class="filter-actions">
            <button class="search-btn" @click="searchData">查询</button>
            <button class="reset-btn" @click="resetFilters">重置</button>
          </view>
        </view>
        
        <!-- 列表表头 -->
        <view class="list-header">
          <text class="list-cell">车牌号</text>
          <text class="list-cell">注册时间</text>
          <text class="list-cell">绑定用户次数</text>
          <text class="list-cell">当前绑定用户</text>
          <text class="list-cell">是否已认证</text>
          <text class="list-cell">是否已实名</text>
          <text class="list-cell">解除绑定次数</text>
        </view>
      </template>
      
      <!-- 列表内容 -->
      <view v-for="(item, index) in dataList" :key="index" class="list-row" @click="showDetail(item)">
        <text class="list-cell">{{ item.plateNumber }}</text>
        <text class="list-cell">{{ item.registerTime }}</text>
        <text class="list-cell">{{ item.bindCount }}</text>
        <text class="list-cell">{{ item.currentUser }}</text>
        <text class="list-cell">{{ item.isVerified ? '是' : '否' }}</text>
        <text class="list-cell">{{ item.isRealName ? '是' : '否' }}</text>
        <text class="list-cell">{{ item.unbindCount }}</text>
      </view>
    </z-paging>
    
    <!-- 详情弹窗 -->
    <view class="detail-modal" v-if="showDetailModal">
      <view class="detail-content">
        <view class="detail-header">
          <text class="detail-title">车辆详情</text>
          <text class="close-btn" @click="showDetailModal = false">×</text>
        </view>
        
        <view class="detail-body" v-if="currentDetail">
          <view class="detail-item">
            <text class="detail-label">车牌号：</text>
            <text class="detail-value">{{ currentDetail.plateNumber }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">注册时间：</text>
            <text class="detail-value">{{ currentDetail.registerTime }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">绑定用户次数：</text>
            <text class="detail-value">{{ currentDetail.bindCount }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">当前绑定用户：</text>
            <text class="detail-value">{{ currentDetail.currentUser }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">是否已认证：</text>
            <text class="detail-value">{{ currentDetail.isVerified ? '是' : '否' }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">是否已实名：</text>
            <text class="detail-value">{{ currentDetail.isRealName ? '是' : '否' }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">解除绑定次数：</text>
            <text class="detail-value">{{ currentDetail.unbindCount }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">历史绑定用户：</text>
            <text class="detail-value">{{ currentDetail.historyUsers }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">最近绑定时间：</text>
            <text class="detail-value">{{ currentDetail.lastBindTime }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">最近解绑时间：</text>
            <text class="detail-value">{{ currentDetail.lastUnbindTime }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'

// 筛选条件
const filters = reactive({
  startDate: '',
  endDate: ''
})

// 列表数据
const dataList = ref([])
const paging = ref(null)

// 详情弹窗
const showDetailModal = ref(false)
const currentDetail = ref(null)

// 日期选择处理
const onStartDateChange = (e) => {
  filters.startDate = e.detail.value
}

const onEndDateChange = (e) => {
  filters.endDate = e.detail.value
}

// 查询数据
const searchData = () => {
  if (paging.value) {
    paging.value.reload()
  }
}

// 重置筛选条件
const resetFilters = () => {
  filters.startDate = ''
  filters.endDate = ''
  
  nextTick(() => {
    if (paging.value) {
      paging.value.reload()
    }
  })
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // 模拟请求延迟
  setTimeout(() => {
    // 生成模拟数据
    const data = generateMockData(pageNo, pageSize)
    paging.value.complete(data)
  }, 500)
}

// 生成模拟数据
const generateMockData = (pageNo, pageSize) => {
  const data = []
  const startIndex = (pageNo - 1) * pageSize
  
  // 车牌前缀
  const platePrefix = ['京A', '沪B', '粤C', '津D', '冀E', '晋F', '蒙G', '辽H', '吉J', '黑K']
  
  // 用户昵称
  const userNames = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '王十二']
  
  // 生成随机数据
  for (let i = 0; i < pageSize; i++) {
    const index = startIndex + i
    if (index >= 100) break // 模拟总数限制
    
    // 生成随机车牌号
    const platePrefix = ['京A', '沪B', '粤C', '津D', '冀E', '晋F', '蒙G', '辽H', '吉J', '黑K']
    const plateNumber = platePrefix[Math.floor(Math.random() * platePrefix.length)] + 
                       Math.floor(Math.random() * 10000).toString().padStart(4, '0')
    
    // 生成注册时间（最近2年内的随机日期）
    const registerDate = new Date()
    registerDate.setDate(registerDate.getDate() - Math.floor(Math.random() * 730)) // 最近2年
    const registerTime = formatDate(registerDate)
    
    // 生成绑定次数和解绑次数
    const bindCount = Math.floor(Math.random() * 10) + 1
    const unbindCount = Math.floor(Math.random() * bindCount)
    
    // 生成当前绑定用户
    const currentUser = userNames[Math.floor(Math.random() * userNames.length)]
    
    // 生成是否认证和实名
    const isVerified = Math.random() > 0.3 // 70%概率已认证
    const isRealName = isVerified && Math.random() > 0.2 // 已认证的80%概率已实名
    
    // 生成历史绑定用户
    const historyUserCount = Math.min(bindCount - 1, 3) // 最多显示3个历史用户
    let historyUsers = ''
    if (historyUserCount > 0) {
      const historyUserList = []
      for (let j = 0; j < historyUserCount; j++) {
        let randomUser
        do {
          randomUser = userNames[Math.floor(Math.random() * userNames.length)]
        } while (randomUser === currentUser || historyUserList.includes(randomUser))
        historyUserList.push(randomUser)
      }
      historyUsers = historyUserList.join('、')
    } else {
      historyUsers = '无'
    }
    
    // 生成最近绑定和解绑时间
    const lastBindDate = new Date()
    lastBindDate.setDate(lastBindDate.getDate() - Math.floor(Math.random() * 180)) // 最近半年
    const lastBindTime = formatDate(lastBindDate)
    
    let lastUnbindTime = '无'
    if (unbindCount > 0) {
      const lastUnbindDate = new Date()
      lastUnbindDate.setDate(lastUnbindDate.getDate() - Math.floor(Math.random() * 365)) // 最近一年
      lastUnbindTime = formatDate(lastUnbindDate)
    }
    
    data.push({
      id: index + 1,
      plateNumber,
      registerTime,
      bindCount,
      currentUser,
      isVerified,
      isRealName,
      unbindCount,
      historyUsers,
      lastBindTime,
      lastUnbindTime
    })
  }
  
  return data
}

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 显示详情
const showDetail = (item) => {
  currentDetail.value = item
  showDetailModal.value = true
}

// 页面加载
onMounted(() => {
  // 设置默认日期范围（最近7天）
  const endDate = new Date()
  const startDate = new Date(endDate.getTime() - 6 * 24 * 60 * 60 * 1000)
  
  filters.endDate = formatDate(endDate)
  filters.startDate = formatDate(startDate)
  
  // 页面挂载时获取数据
  nextTick(() => {
    if (paging.value) {
      paging.value.reload()
    }
  })
})
</script>

<style lang="scss" scoped>
.user-vehicle-stats-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  color: white;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }
}

.filter-section {
  background: white;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .filter-row {
    display: flex;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .filter-item {
    flex: 1;
    margin-right: 20rpx;
    
    &:last-child {
      margin-right: 0;
    }
    
    &.full-width {
      flex: none;
      width: 100%;
      margin-right: 0;
    }
  }
  
  .filter-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .date-picker,
  .picker-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 10rpx;
    background: #fafafa;
    font-size: 26rpx;
    color: #666;
  }
  
  .filter-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
  }
  
  .search-btn,
  .reset-btn {
    flex: 1;
    padding: 20rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    border: none;
  }
  
  .search-btn {
    background: #1890FF;
    color: white;
  }
  
  .reset-btn {
    background: #f0f0f0;
    color: #666;
  }
}

.list-header {
  display: flex;
  background: #f8f9fa;
  padding: 20rpx;
  border-bottom: 2rpx solid #eee;
  margin: 0 20rpx;
  border-radius: 20rpx 20rpx 0 0;
  
  .list-cell {
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #333;
    font-size: 24rpx;
  }
}

.list-paging {
  min-height: 400rpx;
  flex: 1;
  height: 100%;
}

.list-row {
  display: flex;
  padding: 30rpx 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  margin: 0 20rpx;
  background: white;
  
  &:last-child {
    border-bottom: none;
    border-radius: 0 0 20rpx 20rpx;
  }
  
  .list-cell {
    flex: 1;
    text-align: center;
    font-size: 24rpx;
    color: #666;
  }
}

.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .detail-content {
    width: 80%;
    max-height: 80%;
    background-color: white;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 2rpx solid #f0f0f0;
    
    .detail-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      font-size: 40rpx;
      color: #999;
      line-height: 1;
    }
  }
  
  .detail-body {
    padding: 30rpx;
    overflow-y: auto;
  }
  
  .detail-item {
    display: flex;
    margin-bottom: 20rpx;
    
    .detail-label {
      width: 200rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .detail-value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}
</style>